<template>
  <div class="chart">
    <div v-if="widgetData.value.bgImg !== ''" class="titleBox">
      <div class="img"><img :src="widgetData.value.bgImg"></div>
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div v-else class="titleBox">
      <!-- <i class="el-icon-picture"></i> -->
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>

    <div class="dataBox">
      <div class="item" v-for="(item, idx) in widgetData.value.newsData" :key="idx">
        <div class="text"><span>{{ item.text }}</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['widgetData'],
  computed: {},
  data() {
    return {}
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {},
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .titleBox {
    width: 100%;
    height: 40px;
    position: relative;

    .img {
      width: 100%;
      height: 40px;
      position: absolute;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 13px;
      color: #FFFFFF;
      background-color: #000;
      font-size: 18px;
    }

    .el-icon-picture {
      width: 100%;
      height: 40px;
      position: absolute;
      font-size: 3.125rem;
      background: #ffffff;
      color: #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .dataBox {
    width: 100%;
    height: calc(100% - 40px);

    .item {
      width: 100%;
      padding: 8px 15px;
      padding-bottom: 0;

      .text {
        width: 100%;
        color: #fff;
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}
</style>